<template>
<transition
name="bounce rotate"
enter-active-class="fadeIn" leave-active-class="bounceOutLeft">
  <div class="left-bar" v-show="visible">
     <div class="header">
      <div class="close" @click="close">
        <!-- <icon-svg name="xiangzuo"></icon-svg> --> 
       </div>
        当前任务进展
     </div>
    <el-scrollbar style="height: 370px;" :native="false" 
    class="default-scrollbar" wrap-class="default-scrollbar__wrap" >  
     <div class="body">
          <div class="task-item" v-for="(item,index) in list" :key="index">
            <div class="time">
              {{ item.createTime }}
              <span v-if="item.isOverdue === 1" style="color:#f56c6c;float: right;">
                <icon-svg name="jinggao"></icon-svg>
                任务超时</span>
            </div>
            <div class="data">
              <div class="place j-primary-color">{{ item.pointName }}</div>
              <div class="event">{{ item.taskName }}</div>
            </div>
             <el-progress :text-inside="true" :stroke-width="15" :percentage="item.proccess" status="exception" v-if="item.isOverdue === 1"></el-progress>
             <el-progress :text-inside="true" :stroke-width="15" :percentage="item.proccess" v-else></el-progress>
             <div class="info">
                <div class="member j-primary-color">{{ item.userName }}</div>
                <div class="tel">{{ item.userMobile }}</div>
             </div>
          </div>
     </div>
    </el-scrollbar>  
     <div class="bottom"  @click="submit">
       <icon-svg name="xiafa"></icon-svg>
       任务下发
          <!-- <el-button type="success"
          style="width: 100%;border-radius: 0;" icon="el-icon-circle-plus-outline"
           @click="submit">任务下发</el-button> -->
     </div>

     <task-layer ref="taskLayer" v-if="showTaskLayer"/>
  </div>
</transition>  
</template>
<script>
import TaskLayer from './task-layer';
export default {
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  components: {
    TaskLayer
  },
  data() {
    return {
      showTaskLayer: false,
      list: []
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    submit() {
      this.showTaskLayer = true;
      this.$nextTick(_ => {
        this.$refs.taskLayer.openDialog();
      });
    },
    close() {
      this.$emit('update:visible', false);
    },
    getDataList() {
      const params = {
        url: `/api/ems/task/list/current`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.list = rows;
        }
      });
    }
  }
};
</script>
<style>
.default-scrollbar__wrap {
  overflow-x: auto;
  /* background: #061925; */
}
</style>
<style lang="scss" scoped>
$primary-light-bgcolor:  #bad4ec;
$primary-color:#196FBF;

.j-primary-color {
  color:$primary-color !important;
}
.j-primary-bgcolor {
  background-color:$primary-color !important;
}
.j-primary-light-bgcolor {
  background-color: $primary-light-bgcolor !important;
 }
.j-primary-border-color {
  border-color:$primary-color !important;
}
.j-primary-light-border-color {
  border-color: $primary-light-bgcolor !important;
}
.left-bar{
    background-image: url('/static/images/base/leftbg.png');
    background-size: 100% 100%;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
    // display: flex;
    width: 336px;
    height: 490px;
    // background: white;
    // border-radius: 2px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .header{
      height: 50px;margin-top: 20px;
      // background-image: url('/static/images/base/u1140.png');
      font-weight: 700;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 50px;
      padding-left: 15px;
      display: flex;
       align-items: center;
      .close{
        // position: absolute;
        // right: 5px;
        // top: 26px;
        display: flex;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    .body{
      // height: 334px;
      // background: #061925;
      border-radius: 2px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      .time{
        color: black;
      }
      .task-item{
        height: 80px;
        background: white;
        margin-bottom: 5px;
        padding: 0 20px;
        padding-top: 5px;
        margin: 10px 20px;
        border-radius: 5px;
      }
      .task-item:last-child{
        margin-bottom: 0
      }
      .info{
        display: flex;
        justify-content: space-between;
        color:black;
        line-height: 20px;
      }
      .member{
       font-weight: 400;
      }
      .data{
        display: flex;
        justify-content: space-between;
        color:white;
        line-height: 20px;
      }
      .event{
        color: black;
      }
    }
    
    .bottom{
      height: 50px;
      position: absolute;
      bottom: -55px;
      width: 100%;
      background-image: url('/static/images/base/taskbtn.png');
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      font-size: 16px;
      color: white;
      padding-top: 13px;

      .icon-svg{
        width: 1.2em;
        height: 1.2em;
      }
    }
}
</style>